<template>
  <div class="box-container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/bghome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>板块管理</el-breadcrumb-item>
      <el-breadcrumb-item>帖子详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 板块管理区域 -->
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search ||
              data.topic.toLowerCase().includes(search.toLowerCase()) ||
              data.text.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column label="sid" align="center" sortable width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sid }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="发帖日期"
          align="center"
          sortable
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{
              new Date(scope.row.registerTime).toLocaleString()
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="topic" label="帖子" align="center" width="120">
          <template slot-scope="scope">
            <el-tag style="margin-left: 10px">{{
              scope.row.topic | ellipsis
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="text"
          label="帖子详情"
          align="center"
          width="140"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              deleteLabel(scope.row.text) | ellipsis
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="applaud"
          label="点赞量"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.applaud }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="collected"
          label="收藏量"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.collected }}</span>
          </template>
        </el-table-column>
        <el-table-column align="right" prop="address" :formatter="formatter">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              clearable
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-tooltip content="查看" placement="top">
              <el-button
                size="mini"
                type="primary"
                @click="PlateListEdit(scope.$index, scope.row)"
                icon="el-icon-edit"
                circle
              >
              </el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-button
              size="mini"
              @click="PlateListeDelete(scope.$index, scope.row.sid, scope.row.pid)"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 帖子详情对话框 -->
    <el-dialog
      title="帖子详情"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
    >
      <div class="plateDetail">
        <span v-html="detail.text"></span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllPost,
  updatePost,
  goToRecycle
} from '@/api/services/backstage.services'
export default {
  name: 'plate-list',
  data () {
    return {
      tableData: [],
      search: '',
      centerDialogVisible: false,
      detail: {}
    }
  },
  created () {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中......',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(() => {
      loading.close()
    }, 1000) /* 设置时间为1秒 */
  },
  // 控制详情展示文字
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0, 8) + '...'
      }
      return value
    }
  },
  mounted () {
    this.getAllPostInfo()
  },
  methods: {
    // 发起请求获取所有板块信息
    async getAllPostInfo (index, row) {
      const data = await getAllPost()
      this.tableData = data
      console.log(data)
      if (data !== null) return this.$message.success('获取数据成功！')
      return this.$message.error('获取数据失败！')
    },
    // 编辑
    PlateListEdit (index, row) {
      this.centerDialogVisible = true
      this.detail = row
    },
    // 删除
    async PlateListeDelete (index, sid, pid) {
      // console.log(pid);
      // console.log(index);
      const data = await goToRecycle(sid, pid)
      this.tableData.splice(this.tableData.length - index - 1, 1)
      // console.log(data);
      this.$router.go()
      this.tableData = data
    },
    // 删除标签
    deleteLabel (text) {
      const reg = /<\/?.+?\/?>/g
      return text.replace(reg, '')
    },
    formatter (row, column) {
      console.log(row)
      return row.address
    }
  }
}
</script>
<style lang="less" scoped>
.plateDetail {
  width: 100%;
  height: 100%;
}
.box-container {
  height: 100%;
  min-width: 800px;
}
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 10px 0;
}

.box-card {
  width: 100%;
}
</style>
